<template>
	<view>
		<!-- 遮罩 -->
		<view class="top" v-if="isHomeFixed == true"></view>
		<view class="bg" :style="{height:top+'px'}" v-if="isHide == true"></view>
		<!-- 轮播图 -->
		<uni-swiper-dot :info="swiperList" :current="current">
			<swiper class="swiper-box" :autoplay="autoplay" :interval="interval" @change="change" circular="true">
				<swiper-item v-for="(item,index) in swiperList" :key="index" @click="checkSwiper(item.bookId)">
					<image :src="item.picUrl"></image>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>
		<!-- 搜索框 -->
		<view :class="[isSearchFixed?'searchFixed':'search']" v-if="isHomeFixed == false">
			<view class="search-input" @click="goSearch">
				<view class="search-icon">
					<image src="../../static/icon/search.png" mode=""></image>
				</view>
				<view class="search-content">请输入小区名或地址</view>
			</view>
		</view>
		<view class="interval" v-if="isHomeFixed == false"></view>
		<!-- 上滑后的搜索框 -->
		<view class="interval-2" v-if="isHomeFixed == true"></view>
		<view class="bgColor" v-if="isHomeFixed == true">
			<view class="search-2">
				<view class="search-2-input" @click="goSearch">
					<view class="search-2-icon">
						<image src="../../static/icon/search.png" mode=""></image>
					</view>
					<view class="search-2-content">请输入小区名或地址</view>
				</view>
			</view>
		</view>
		<!-- 功能分类 -->
		<uni-grid :show-border="false" column-num="5" :options="options" @click="jump"></uni-grid>
		<!-- 头条 -->
		<view class="headlines">
			<view class="headlines-part">
				<view class="headlines-icon" @click="checkHeadLines">
					<image src="../../static/icon/headlines.png" mode=""></image>
				</view>
				<swiper vertical autoplay circular interval="3000" class="headlines-content" duration="1000">
					<swiper-item v-for="(item,index) in newsList" :key="index" style="display: flex; flex-direction: row;" @click="checkHeadDetail(item.id)">
						<view class="headlines-msg">
							<view class="headlines-title"><text>{{item.title}}</text></view>
							<view class="headlines-title"><text>{{item.content}}</text></view>
						</view>
						<view class="headlines-pic">
							<image :src="item.picUrl"></image>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<!-- 独家委托 -->
		<view class="Sole">
			<view class="sole-img" @click="checkSole">
				<image src="https://img.bajiaostar.com/Fic8cuQLgmwN3vpBtg1A56fAY8hG" mode=""></image>
				<view class="sole-text"><text>独家委托</text></view>
			</view>
		</view>
		<!-- 已售 -->
		<view class="sale" @click="checkSale">
			<view class="sale-part">
				<view class="sale-icon">
					<view class="sale-title"><text>近期已售</text></view>
				</view>
				<swiper vertical autoplay circular interval="3000" class="sale-content" duration="1000">
					<swiper-item v-for="(item,index) in saleList" :key="index" style="display: flex; flex-direction: row;">
						<view>
							<text class="sale-msg">{{item.name}} <text class="sale-price">{{item.price}}万</text>已售</text>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<!-- 首页住房列表 -->
		<view>
			<view class="home-tab" :class="[isHomeFixed?'navFixed':'']">
				<view class="tab-tit"><text>为你推荐</text></view>
				<scroll-view id="nav-bar" class="nav-bar" scroll-x scroll-with-animation :scroll-left="scrollLeft">
					<view v-for="(item,index) in tabList" :key="item.id" class="nav-item" :class="{current: index === tabCurrentIndex}"
					 :id="'tab'+index" @click="changeTab(index)">{{item.name}}</view>
				</scroll-view>
			</view>
			<swiper :current="tabCurrentIndex"  duration="300" @change="swiperChange" style="height: calc(100vh - 100rpx);">
				<swiper-item v-for="(it,index) in tabList" :key="index">
					<scroll-view class="homeList" :scroll-y="isScroll" style="height: calc(100vh - 100rpx);" @scrolltolower="loadMore" :class="[isHomeFixed?'theTop':'']" v-if="!isEmpty">
						<view class="home-info" v-for="(item,index) in homeList" :key="index" v-if="houseType !==3" @click="checkDetail(item.houseId)">
							<view class="home-pic">
								<image :src="item.picUrl[0]" lazy-load="true"></image>
							</view>
							<view class="home-detail">
								<view class="homeName"><text>{{item.houseName}}</text></view>
								<view class="home-address"><text space="nbsp">{{item.provinceString}} |{{item.areaName}} |{{item.buildNum}}栋{{item.roomNum}}</text></view>
								<view class="home-tips">
									<view :class="[{'tips-1':labIndex == 0,'tips-2':labIndex == 1,'tips-3':labIndex == 2}]" v-for="(it,labIndex) in item.label" :key="labIndex"><text>{{it}}</text></view>
								</view>
								<view class="home-price" v-if="houseType == 2"><text>{{item.price}}万({{item.acreage}}m²|{{item.unitPrice}}元/m²)</text></view>
								<view class="home-price" v-if="houseType == 1">
									<text>{{ item.rental }}元/月({{ item.acreage }}m²)</text>
								</view>
							</view>
						</view>
						<view class="home-info" v-for="(item,index) in homeList" :key="index" v-if="houseType ==3" @click="checkDetail(item.areaId)">
							<view class="home-pic">
								<image :src="item.picUrl[0]" lazy-load="true"></image>
							</view>
							<view class="home-detail">
								<view class="homeName"><text>{{item.areaName}}</text></view>
								<view class="home-address"><text space="nbsp">{{item.provinceString}}</text></view>
								<view class="home-tips">
									<view :class="[{'tips4':labIndex == 0,'tips5':labIndex !== 0}]" v-for="(it,labIndex) in item.label" :key="labIndex"><text>{{it}}</text></view>
								</view>
								<view class="home-price"><text>{{item.price}}元/m²(楼盘均价)</text></view>
							</view>
						</view>
						<!-- 加载 -->
						<uni-load-more :status="status" :contentText="contentText"></uni-load-more>	
					</scroll-view>
					<view v-if="isEmpty" class="noData" style="height: calc(100vh - 100rpx);" :class="[isHomeFixed?'theTop':'']">
						<view class="nodata-img">
							<image src="../../static/icon/nodata.png" mode=""></image>
						</view>
						<view class="nodata-content"><text>暂无数据哦～</text></view>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import {
		uniSwiperDot
	} from '../../components/uni-swiper-dot/uni-swiper-dot.vue'
	import uniGrid from '../../components/uni-grid/uni-grid.vue'
	import uniLoadMore from '../../components/uni-load-more/uni-load-more.vue'		
	export default {
		name: "home",
		components: {
			uniSwiperDot,
			uniGrid,
			uniLoadMore
		},
		data() {
			return {
				autoplay: true,
				interval: 3000,
				indicatorDots: true,
				indicatorColor: '#FFFFFF',
				swiperList: [],
				current: 0,
				options: [{
						image: '../../static/icon/ershoufang.png',
						text: '二手房'
					},
					{
						image: '../../static/icon/xinfang.png',
						text: '新房'
					},
					{
						image: '../../static/icon/zufang.png',
						text: '租房'
					},
					{
						image: '../../static/icon/woshiyezhu.png',
						text: '我是业主'
					},
					{
						image:'../../static/icon/1.png',
						text:'小区介绍'
					},
					{
						image: '../../static/icon/zhaofang.png',
						text: '地图找房'
					},
					{
						image: '../../static/icon/jisuanqi.png',
						text: '房贷计算'
					},
					{
						image: '../../static/icon/baike.png',
						text: '购房百科'
					},
					{
						image: '../../static/icon/2.png',
						text: '我要推荐'
					},
					{
						image:'../../static/icon/3.png',
						text:'下吕浦'
					}
				],
				newsList: [],
				saleList: [],
				tabList: [{
					id:'1',
					name: '二手房'
				}, {
					id:'2',
					name: '新房'
				}, {
					id:'3',
					name: '租房'
				}],
				tabCurrentIndex: 0,
				textFlex: true,
				homeList: [],
				swiperHeight: '',
				searchTop: '',
				top: '',
				isSearchFixed: false,
				isHomeFixed: false,
				isHide: false,
				page:0,
				houseType:2,
				type:'',
				hasFlag:true,
				status: 'loading',
				contentText: {
					contentdown: '查看更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多了'
				},
				isEmpty:false,
				isScroll:false
			}
		},
		methods: {
			change(e) {
				this.current = e.detail.current
			},
			changeTab(index) {
				if(this.tabCurrentIndex !== index){
					this.tabCurrentIndex = index
				}
			},
			swiperChange(e) {
				console.log(e.target);
				this.tabCurrentIndex = e.target.current;
				if(this.tabCurrentIndex == 0){
					this.houseType = 2
				}else if(this.tabCurrentIndex == 1){
					this.houseType = 3
				}else{
					this.houseType = 1
				}
				this.page = 0;
				this.hasFlag = true;
				this.status = 'loading'
				this.homeList = [];
				this.getRecommend()
			},
			// 跳转到搜索页
			goSearch() {
				uni.navigateTo({
					url: '../search/search'
				})
			},
			// 跳转到各功能页
			jump(e) {
				if (e.index == 0) {
					uni.navigateTo({
						url: '../homeList/homeList?id=1'
					})
				}
				if(e.index == 1){
					uni.navigateTo({
						url: '../homeList/homeList?id=2'
					})
				}
				if(e.index == 2){
					uni.navigateTo({
						url: '../homeList/homeList?id=3'
					})
				}
				if(e.index == 3){
					uni.navigateTo({
						url:'../Owner/Owner'
					})
				}
				if(e.index == 8){
					uni.navigateTo({
						url:'../recommend/recommend'
					})
				}
				if(e.index == 6){
					uni.navigateTo({
						url:'../calculator/calculator'
					})
				}
				if(e.index == 7){
					uni.navigateTo({
						url:'../wiki/wiki'
					})
				}
				if(e.index == 5){
					uni.navigateTo({
						url:'../mapSearch/mapSearch'
					})
				}
				if(e.index == 4){
					uni.navigateTo({
						url:'../xiaoqu/xiaoqu'
					})
				}
				if(e.index == 9){
					uni.navigateTo({
						url:'../homeList/homeList?id=4'
					})
				}
			},
			// 查看英棒头条列表
			checkHeadLines(){
				uni.navigateTo({
					url:'../headlines/headlines'
				})
			},
			// 获取首页数据
			async getIndexData(){
				let res = await this.$fetch(this.$api.indexData,{},'GET')
				this.swiperList = res.data.picasaList;
				res.data.headlines.forEach(item => {
					item.content = this.filterHTMLTag(item.content)
				})
				this.newsList = res.data.headlines
				this.saleList = res.data.soldHous
				console.log(res);
			},
			filterHTMLTag (msg) {
				var msg = msg.replace(/<\/?[^>]*>/g, ''); //去除HTML Tag
				msg = msg.replace(/[|]*\n/, '') //去除行尾空格
				msg = msg.replace(/&npsp;/ig, ''); //去掉npsp
				return msg;
			},
			// 查看头条详情
			checkHeadDetail(id){
				uni.navigateTo({
					url:'../headlines/headDetail?id='+id
				})
			},
			// 查看近期已售
			checkSale(){
				uni.navigateTo({
					url:'../salelist/salelist'
				})
			},
			// 查看独家委托
			checkSole(){
				uni.switchTab({
					url:'../sole/sole'
				})
			},
			// 获取为你推荐
			async getRecommend(){
				if (!this.hasFlag) return // 说明已经没有更多
				this.page = ++this.page
				let res = await this.$fetch(this.$api.recommend,{pageNum:this.page,pageSize:10,type:this.houseType},'GET')
				console.log(res);
				if(res.total){
					this.isEmpty = false
				}else{
					this.isEmpty = true
				}
				this.hasFlag = 10*this.page < res.total
				if(!this.hasFlag){
					this.status = 'noMore'
				}
				res.rows.forEach(item => {
					if (item.picUrl) {
						item.picUrl = item.picUrl.split(',');
					}
					if (item.label) {
						item.label = item.label.split(',');
					}
				});
				this.homeList = [...this.homeList,...res.rows]
			},
			// 加载更多
			loadMore(){
				if(this.hasFlag){
					this.getRecommend()
				}else{
					this.status = 'noMore'
				}
			},
			// 查看轮播图详情
			checkSwiper(id){
				uni.navigateTo({
					url:'../headlines/headDetail?id='+id
				})
			},
			// 查看房源详情
			checkDetail(id){
				if(this.houseType == 2){
					uni.navigateTo({
						url:'../oldHouse/oldHouse?houseId='+id+'&houseType=2'
					})
				}else if(this.houseType == 1){
					uni.navigateTo({
						url:'../oldHouse/oldHouse?houseId='+id+'&houseType=1'
					})
				}else if(this.houseType == 3){
					uni.navigateTo({
						url:'../newHouse/newHouse?houseId='+id+'&houseType=3'
					})
				}
			},
			// 验证Token是否过期
			async isToken(){
				let res = await this.$fetch(this.$api.checkToken,{},'GET')
				if(res.code == 401){
					uni.setStorageSync('isToken',false)
				}else if(res.code == 0){
					uni.setStorageSync('isToken',true)
				}
			}
		},
		onLoad() {
			let line = Math.ceil(this.homeList.length)
			this.swiperHeight = 125 * line + 'px'
		},
		onShow() {
			this.getIndexData()
			this.getRecommend()
			this.isToken()
		},
		onPageScroll(e) {
			if (this.searchTop <= e.scrollTop) {
				this.isSearchFixed = true;
			} else {
				this.isSearchFixed = false;
			}
			if (this.top - 64 > e.scrollTop) {
				this.isHomeFixed = false;
				this.isScroll = false
			} else {
				this.isHomeFixed = true;
				this.isScroll = true;
			}
			if (e.scrollTop > 530 && e.scrollTop < this.top - 64) {
				this.isHide = true;
			} else {
				this.isHide = false;
			}
		},
		onReady() {
			const query = uni.createSelectorQuery().select('.search');
			query.boundingClientRect(data => {
				this.searchTop = data.top
			}).exec();
			const que = uni.createSelectorQuery().select('.sale');
			que.boundingClientRect(data => {
				this.top = data.top + data.height;
			}).exec()
		}
	}
</script>

<style lang="scss">
	page {
		background: #F7F7F7;
	}

	.swiper-box {
		width: 100%;
		height: 360rpx;
	}

	.swiper-box image {
		width: 100%;
	}

	.search {
		width: 690rpx;
		height: 90rpx;
		margin: 0 30rpx;
		background: #FFFFFF;
		border-radius: 8rpx;
		box-shadow: 0 4rpx 12rpx 0 rgba(65, 56, 133, 0.10);
		position: absolute;
		z-index: 10;
		top: 316rpx
	}

	.search-input {
		margin: 0 30rpx;
		padding: 20rpx 0;
		height: 50rpx;
		display: flex;
		flex-direction: row;
	}

	.search-icon {
		width: 28rpx;
		height: 50rpx;
		margin-right: 10rpx;
		display: flex;
		align-items: center;
	}

	.search-icon image {
		width: 28rpx;
		height: 28rpx;
	}

	.search-content {
		font-size: 24rpx;
		letter-spacing: 0.28rpx;
		color: #A6A6A6;
		height: 50rpx;
		line-height: 50rpx;
	}

	// .search-content input {
	// 	line-height: 34rpx;
	// }

	.interval {
		width: 100%;
		height: 46rpx;
		background: #FFFFFF;
	}

	.interval-2 {
		width: 100%;
		background: #874A98;
		height: 46rpx;
	}

	.headlines {
		width: 100%;
		height: 120rpx;
		background: #FFFFFF;
	}

	.headlines-part {
		display: flex;
		flex-direction: row;
		margin: 0 30rpx;
		height: 120rpx;
	}

	.headlines-icon {
		width: 90rpx;
		height: 68rpx;
		margin-top: 26rpx;
		border-right: 1rpx solid #F0F1F1;
	}

	.headlines-icon image {
		width: 60rpx;
		height: 68rpx;
	}

	.headlines-content {
		margin-left: 30rpx;
		width: 556rpx;
		height: 90rpx;
		margin-top: 14rpx;
	}

	.headlines-msg {
		width: 442rpx;
		display: flex;
		flex-direction: column;
		margin-right: 24rpx;
	}

	.headlines-title {
		margin-bottom: 10rpx;
		width: 442rpx;
		font-size: 26rpx;
		color: #8D8D8D;
		letter-spacing: 0;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.headlines-pic {
		width: 90rpx;
		height: 90rpx;
	}

	.headlines-pic image {
		width: 90rpx;
		height: 90rpx;
		border-radius: 4rpx;
	}

	.Sole {
		margin-top: 30rpx;
		width: 100%;
		height: 400rpx;
		background: #FFFFFF;
	}

	.sole-img {
		width: 690rpx;
		height: 340rpx;
		margin: 0 30rpx;
		padding-top: 30rpx;
		position: relative;
	}

	.sole-img image {
		width: 690rpx;
		height: 340rpx;
		position: relative;
		border-radius: 4rpx;
	}

	.sole-img .sole-text {
		position: absolute;
		top: 30rpx;
		bottom: 0;
		left: 0;
		right: 0;
		text-align: center;
		line-height: 340rpx;
		background: rgba(0, 0, 0, 0.40);
		-webkit-backface-visibility: hidden;
		/* 隐藏旋转元素的背面*/
		backface-visibility: hidden;
		color: #FFFFFF;
		font-size: 48rpx;
	}

	.sale {
		margin-top: 30rpx;
		background: #FFFFFF;
		width: 100%;
		height: 100rpx;
	}

	.sale-part {
		height: 100rpx;
		margin: 0 30rpx;
		display: flex;
		flex-direction: row;
	}

	.sale-icon {
		margin-top: 14rpx;
		height: 72rpx;
		width: 96rpx;
		border-right: 1rpx solid #F0F1F1;
	}

	.sale-title {
		width: 70rpx;
		height: 72rpx;
		font-size: 28rpx;
		color: #5B5B5B;
		text-align: center;
		line-height: 36rpx;
		font-weight: bold;
	}

	.sale-content {
		margin: 26rpx 30rpx;
		width: 562rpx;
		height: 48rpx;
	}

	.sale-msg {
		font-size: 28rpx;
		color: #5B5B5B;
		letter-spacing: 0;
		margin-top: 4rpx;
	}

	.sale-price {
		margin-left: 10rpx;
		font-size: 34rpx;
		color: #FFC900;
		letter-spacing: 0;
	}
	
	.home-tab{
		width: 100%;
		display: flex;
		height: 90rpx;
		box-shadow: 0 2upx 8upx rgba(0, 0, 0, .06);
		background: #FFFFFF;
		position: relative;
		z-index: 10;
	}
	.tab-tit{
		flex: 1;
		height: 90rpx;
		margin-left: 30rpx;
		font-size: 36rpx;
		line-height: 90rpx;
		font-weight: bold;
	}
	.nav-bar {
		flex: 1;
		position: relative;
		z-index: 10;
		height: 90upx;
		white-space: nowrap;
		// box-shadow: 0 2upx 8upx rgba(0, 0, 0, .06);
		background-color: #fff;

		.nav-item {
			display: inline-block;
			width: 125rpx;
			// width: 187.5upx;
			height: 90upx;
			text-align: center;
			line-height: 90upx;
			font-size: 28upx;
			color: #A6A6A6;
			position: relative;

			&:after {
				content: '';
				width: 0;
				height: 0;
				border-bottom: 6upx solid #874A98;
				position: absolute;
				left: 50%;
				bottom: 0;
				transform: translateX(-50%);
				transition: .3s;
			}
		}

		.current {
			color: #874A98;
			font-size: 36rpx;
			font-weight: bold;

			&:after {
				width: 50%;
			}
		}
	}

   .homeList {
		width: 100%;
		background: #FFFFFF;
		// margin-top:266rpx;
		.home-info {
			display: flex;
			flex-direction: row;
			margin-left: 30rpx;
			// padding-top: 40rpx;
			height: 250rpx;
			// padding-bottom: 30rpx;
			border-bottom: 2rpx solid #F7F7F7;
		}
	}
	
	.home-pic {
		width: 240rpx;
		height: 180rpx;
		margin-right: 30rpx;
		margin-top: 40rpx;
		border-radius: 4rpx;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		background-image: url('');
	}
	
	.home-pic image {
		width: 240rpx;
		height: 180rpx;
		border-radius: 4rpx;
	}
	
	.home-detail {
		margin-top: 40rpx;
		display: flex;
		flex-direction: column;
	
		.homeName {
			width: 420rpx;
			font-size: 28rpx;
			color: #5B5B5B;
			text-align: justify;
			letter-spacing: 0;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
			font-weight: bold;
		}
	
		.home-address {
			width: 420rpx;
			font-size: 24rpx;
			color: #A6A6A6;
			letter-spacing: 0;
			text-align: justify;
			margin-top: 8rpx;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
		}
	
		.home-tips {
			display: flex;
			flex-direction: row;
			margin-top: 10rpx;
	
			.tips-1 {
				background: rgba(241, 78, 44, 0.15);
				border-radius: 8rpx;
				font-size: 20rpx;
				color: #F14E2C;
				letter-spacing: 0;
				text-align: justify;
				margin-right: 30rpx;
				height: 36rpx;
				line-height: 36rpx;
			}
	
			.tips-2 {
				background: rgba(74, 144, 226, 0.15);
				border-radius: 8rpx;
				font-size: 20rpx;
				color: #4A90E2;
				letter-spacing: 0;
				text-align: justify;
				margin-right: 30rpx;
				height: 36rpx;
				line-height: 36rpx;
			}
	
			.tips-3 {
				background: rgba(211, 160, 221, 0.15);
				border-radius: 8rpx;
				font-size: 20rpx;
				color: #800080;
				letter-spacing: 0;
				text-align: justify;
				height: 36rpx;
				line-height: 36rpx;
			}
			
			.tips4{
				background: #48D2AB;
				border-radius: 8rpx;
				font-size: 20rpx;
				color: #FFFFFF;
				letter-spacing: 0;
				text-align: justify;
				margin-right: 30rpx;
				height: 36rpx;
				line-height: 36rpx;
			}
			
			.tips5{
				background: rgba(74, 144, 226, 0.15);
				border-radius: 8rpx;
				font-size: 20rpx;
				color: #4A90E2;
				letter-spacing: 0;
				text-align: justify;
				margin-right: 30rpx;
				height: 36rpx;
				line-height: 36rpx;
			}
		}
	
		.home-price {
			font-size: 28rpx;
			color: #FE9E2E;
			letter-spacing: 0;
			text-align: justify;
			font-size: 24rpx;
			margin-top: 12rpx;
		}
	}
	
	.tips-1 text {
		margin: 0 10rpx;
	}
	
	.tips-2 text {
		margin: 0 10rpx;
	}
	
	.tips-3 text {
		margin: 0 10rpx;
	}
	.tips4 text{
		margin: 0 10rpx;
	}
	.tips5 text{
		margin: 0 10rpx;
	}
	.noData{
		background: #FFFFFF;
		width: 100%;
		display: flex;
		flex-direction: column;
		
		.nodata-img{
			width: 100%;
			height: 325.6rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 200rpx;
			
			image{
				width: 300rpx;
				height: 325.6rpx;
			}
		}
		
		.nodata-content{
			width: 100%;
			margin-top: 40.4rpx;
			font-size: 24rpx;
			color: #A6A6A6;
			text-align: center;
		}
	}	
	.searchFixed {
		position: fixed;
		top: 0;
		width: 690rpx;
		height: 90rpx;
		margin: 0 30rpx;
		background: #FFFFFF;
		border-radius: 8rpx;
		box-shadow: 0 4rpx 12rpx 0 rgba(65, 56, 133, 0.10);
		z-index: 10;
	}

	.navFixed {
		top: 120rpx;
		position: fixed;
	}

	.search-2 {
		width: 690rpx;
		height: 60rpx;
		margin: 0 30rpx;
		background: #FFFFFF;
		border-radius: 4rpx;
		box-shadow: 0 4rpx 12rpx 0 rgba(65, 56, 133, 0.10);
	}

	.search-2-input {
		margin: 0 30rpx;
		padding: 8rpx 0;
		height: 44rpx;
		display: flex;
		flex-direction: row;
	}

	.search-2-icon {
		width: 28rpx;
		height: 44rpx;
		display: flex;
		align-items: center;
		margin-right: 10rpx;
	}

	.search-2-icon image {
		width: 28rpx;
		height: 28rpx;
	}

	.search-2-content {
		font-size: 24rpx;
		letter-spacing: 0.28rpx;
		color: #A6A6A6;
		height: 44rpx;
		line-height: 44rpx;
	}

	.bg {
		z-index: 9;
		background: #874A98;
		position: absolute;
		width: 100%;
	}

	.top {
		top: 0;
		z-index: 10;
		height: 25px;
		position: fixed;
		background: #874A98;
		width: 100%;
	}

	.bgColor {
		background: #874A98;
		position: fixed;
		top: 25px;
		width: 100%;
		height: 39px;
		z-index: 10;
	}
	.theTop{
		margin-top: 90rpx;
	}
</style>
